<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
			}
			
			body {
				height: 100%;
				overflow: hidden;
				background-image:url(img/14-150FZ94211O4.jpg);
			}
			
			.imgdiv {
				position: absolute;
			}
			
			.imgdiv img {
				width: 100%;
				position: absolute;
			}
		</style>
	</head>

	<body>

		<script type="text/javascript">
			function createImg() {
				var div = document.createElement("div");
				div.className = "imgdiv";
				div.style.top = "5px";
				div.style.left = "5px";
				var size = parseInt(Math.random() * 100) + 100;
				div.style.width = size + "px";
				div.style.height = size + "px";
				div.setAttribute("data-rotx", parseInt(Math.random() * 15) + 5);
				div.setAttribute("data-roty", parseInt(Math.random() * 15) + 5);
				for(var k = 0; k < 4; k++) {
					var img = document.createElement("img");
					img.src = "img/ch" + k + ".png";
					div.appendChild(img);
				}
				document.body.appendChild(div);
			}
			var imgNum = 0;
			var id = setInterval(function() {
				createImg();
				imgNum++;
				if(imgNum == 3) {
					clearInterval(id);
				}
			}, 2000);

			setInterval(function() {
				moveImg();
			}, 30);

			function moveImg() {
				var divs = document.getElementsByTagName("div");
				var Height = document.documentElement.clientHeight;
				var Width = document.documentElement.clientWidth;
				for(var i = 0; i < divs.length; i++) {
					
					var rotx = parseInt(divs[i].getAttribute("data-rotx"));
					var roty = parseInt(divs[i].getAttribute("data-roty"));
					var top = parseInt(divs[i].style.top);
					var left = parseInt(divs[i].style.left);

					top += roty;
					left += rotx;
					divs[i].style.top = top + "px";
					divs[i].style.left = left + "px";

					var divHeight = parseInt(divs[i].style.height);
					var divWidth = parseInt(divs[i].style.width);
					if(top >= Height - divHeight) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = (Height - divHeight) + "px";
					}
					if(top <= 0) {
						roty = -roty;
						setImgOpacity(divs[i]);
						divs[i].style.top = "0px";
					}
					if(left >= Width - divWidth) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = (Width - divWidth) + "px";
					}
					if(left <= 0) {
						rotx = -rotx;
						setImgOpacity(divs[i]);
						divs[i].style.left = "0px";
					}

					divs[i].setAttribute("data-rotx", rotx);
					divs[i].setAttribute("data-roty", roty);
				}
			}

			function setImgOpacity(div) {
				var imgs = div.getElementsByTagName("img");
				for(var i = 0; i < imgs.length - 1; i++) {
					imgs[i].style.opacity = Math.random();
				}
			}
		</script>
	</body>